<template>
	<view> 
		<view v-if="showNav" class="cu-custom " :style="[{ height: CustomBar + 'px' }]">
			<view class="cu-bar fixed" :style="style" :class="[bgImage != '' ? 'none-bg text-white bg-img' : '', bgColor]">
				<!-- #ifndef MP-ALIPAY -->
				<view class="action" @tap="BackPage" v-if="isBack && !isHome && !isCity">
					<text class="basefont-back basefont icon-left"></text>
					<text class="text-df">{{ backText }}</text>
				</view>
				<view class="action" v-if="isBack && isHome">
					<view class="navigation-bar-capsule">
						<text @tap="BackPage" class="basefont icon-left"></text>
						<view style="width: 1rpx;height: 18px;border-right:1px solid rgba(255,255,255,.5)"></view>
						<text @tap="HomePage" class="basefont icon-home-fill"></text>
					</view>
				</view>
				<view class="action" @tap="CityPage" v-if="isCity">
					<text v-if="isBack" @tap="BackPage" class="basefont icon-left"></text>
					<text class="text-df">{{ areaName }}</text>
					<text style="padding-left: 10rpx;" class="basefont icon-location-fill"></text>
				</view>
				<view class="content" :style="titleStyle">
					<text style="font-size: 30rpx;" class="text-cut">{{ title }}</text>
				</view>
				<slot name="right"></slot>
				<!-- #endif -->
				
				
			</view>
		</view>
	</view>
</template>

<script>
import systemConfig from '@/common/config/systemConfig.js';
import util from '@/common/util/util.js';
import store from "@/store"
export default {
	data() {
		return {
			//#ifdef MP-ALIPAY
			StatusBar: this.$StatusBar||32,
			//#endif
			//#ifdef MP-WEIXIN
			StatusBar: this.$StatusBar||20,
			//#endif
			CustomBar: this.$CustomBar||70,
			browerInfo:null,
		};
	},
	name: 'cu-custom',
	computed: {
		style() {
			console.log(this.$StatusBar)
			console.log(this.$CustomBar)
			
			var StatusBar = this.StatusBar || 0;
			var CustomBar = this.CustomBar || 70;
	
			
			var bgImage = this.bgImage;
			var style = `height:${CustomBar}px;padding-top:${StatusBar}px;`;
			if (this.bgImage) {
				style = `${style}background-image:url(${bgImage});`;
			}
			return style;
		},
		titleStyle() {
			//#ifdef MP-ALIPAY
			var StatusBar = this.StatusBar || 32;
			//#endif
			//#ifndef MP-ALIPAY
			var StatusBar= this.StatusBar||0;
			//#endif
			var bgImage = this.bgImage;
			var titleStyle = `top:${StatusBar}px;`;

			return titleStyle;
		},
		showNav(){
			let thisShowNav=true;
			// #ifdef H5
			let browerInfo = store.state.hh_browerInfo;
			let userType=store.state.hh_userType
			if (!browerInfo) {
				browerInfo = util.getBrowerInfo()
				this.$u.vuex('hh_browerInfo', browerInfo)
			}
			if (browerInfo) {
				let type = browerInfo.browserType
				if (type == 'zlb' || type == 'zlb-alipay'||type == 'alipay') {
					thisShowNav=false	
					// 浙里办 更新标题
					if (this.title) {
						ZWJSBridge.setTitle({ title: this.title}) .then((result) => { console.log(result) }).catch((error) => { console.log(error) })
					}else{
						ZWJSBridge.setTitle({ title: systemConfig.systemName}) .then((result) => { console.log(result) }).catch((error) => { console.log(error) })
					}
					//浙里办页面埋点
					ZWJSBridge.getLocation() .then((result) => {
						aplus_queue.push({ 'action':'aplus.record', 'arguments':
									['/yourTrackerEventCode', 'CLK',
										{ gdLbs:'高德 GPS 定位',
											long:data.longitude,
											lati:data.latitude,
											site_id:'',
											userType:this.userType=='30'?'企业':'个人',
											zlb_serviceId:'',
											pageName:this.title?this.title:'金华人社',
											miniAppId:'2001101270' }] })
					}).catch((error) => { console.log(error); });
				}else{
					thisShowNav=true
				}
			}else{
				thisShowNav=true
			}
			
			//#endif
			// #ifdef MP-ALIPAY
				thisShowNav=false
				if (this.title) {
					my.setNavigationBar({
					  title: this.title,
					});
				}else{
					my.setNavigationBar({
					  title: systemConfig.systemName,
					});
				}
			//#endif
			
			return thisShowNav
		}
	},
	props: {
		bgColor: {
			type: String,
			default: ''
		},
		isBack: {
			type: [Boolean, String],
			default: false
		},
		backText: {
			type: String,
			default: ''
		},
		isCity: {
			type: [Boolean, String],
			default: false
		},
		areaName: {
			type: String,
			default: ''
		},
		title: {
			type: String,
			default: ''
		},
		isHome: {
			type: [Boolean, String],
			default: false
		},
		bgImage: {
			type: String,
			default: ''
		}
	},
	methods: {
		BackPage() {
			let page = getCurrentPages();
			// #ifdef H5
			if (page) {
				if (page.length <= 1) {
					this.HomePage();
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			} else {
				this.HomePage();
			}
			// #endif
			// #ifndef H5
			if (page) {
				if (page.length <= 1) {
					this.HomePage();
				} else {
					uni.navigateBack({
						delta: 1
					});
				}
			} else {
				this.HomePage();
			}
			// #endif
		},
		CityPage() {
			this.$emit('areaChange');
		},
		HomePage() {
			uni.reLaunch({
				url: systemConfig.homePath
			});
		}
	}
};
</script>

<style lang="scss">
.navigation-bar-capsule {
	position: absolute;
	// height: 32px;
	display: flex;
	align-items: center;
	justify-content: space-around;
	line-height: 28px;
	height: 28px;
	font-size: 16px;
	width: 70px;
	//#ifndef MP-ALIPAY
	left: 10px;
	//#endif
	//#ifdef MP-ALIPAY
	left: 5px;
	//#endif
	//background-color: rgba(255,255,255,.2);
	border-radius: 16px;
	border: 0.5px solid rgba(255, 255, 255, 0.3);
	box-sizing: border-box;
	overflow: hidden;
}
</style>
